<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section {
			width: 800px;
			height: 200px;
			border:1px solid red;
			display: flex;
			margin: 100px auto;
			/*min-width: 300px;      设置最小宽度，小于此值时无法继续缩放
			max-width: 300px;       同上*/
			/*flex-direction: column;  实现垂直方向排列*/
			/*flex-direction: row;   实现水平方向排列*/
		}
		div {
			background-color: pink;

		}

		div:nth-child(1) {
			/*width:300px;  */       /*设置宽度后则无法进行缩放，其余盒子的缩放是在该盒子之外的区域划分*/
			flex: 1;
		}
		div:nth-child(3) {
			flex: 1;
		}
		div:nth-child(2) {
			background-color: purple;
			flex: 2;
		}

	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>